<script lang="ts" setup>
  import { defineEmits, ref, defineExpose } from "vue"

  interface Props {
    title?: string
    submitBtnText?: string
    cancelBtnText?: string
    showFooter?: boolean
    showSubmitBtn?: boolean
    width?: number,
  }

  const props = withDefaults(defineProps<Props>(), {
    title: "",
    submitBtnText: "提交",
    cancelBtnText: "取消",
    showFooter: true, //是否显示按钮
    showSubmitBtn: true,
    width: 500
  })
  const emit = defineEmits(['cancel','comfirm'])

  const show = ref(true)
  const loading = ref(false)

  const cancel = ()=>{
    show.value = false
    emit('cancel')
  }
  const comfirm = ()=>{
    emit('comfirm')
  }
  const setLoading = (flag)=>{
    loading.value = flag
  }

  defineExpose({
    setLoading
  })
</script>

<template>
  <el-drawer v-model="show" :title="props.title" direction="rtl" @closed="cancel" :width="width">
    <template #default>
      <div v-loading="loading">
        <slot></slot>
      </div>
    </template>
    <template v-if="showFooter" #footer>
      <el-button @click="cancel">{{cancelBtnText}}</el-button>
      <el-button v-if="showSubmitBtn" type="primary" @click="comfirm" :loading="loading">{{submitBtnText}}</el-button>
    </template>
  </el-drawer>
</template>

<style>
</style>
